<template>
    <svg aria-hidden="true" v-bind="$attrs" class="svg-icon">
        <use :xlink:href="symbolId" fill="currentColor"/>
    </svg>
</template>

<script setup lang="ts">
import type { IconProps } from './props';
const props = withDefaults(defineProps<IconProps>(), {
    name: '',
});

const symbolId = computed(() => `#icon-${props.name}`);
</script>

<style scoped>
.svg-icon {
    overflow: hidden;
    fill: currentcolor;
    cursor: pointer;
}
</style>
